/**
 * @fileoverview Giant Interective Group, Inc. Javascript Library v#version.
 * 该Javascript UI库是基于jQuery的扩展。
 * <pre>
 * Copyright (C) 2004-2009 Giant Interective Group, Inc. All rights reserved.
 * 版权所有 2004-2009 上海巨人网络科技有限公司
 * </pre>
 * @version #version, #date
 * @author  Zhangkai
 * Depend on jQuery 1.3.x
 */
if (typeof giant === 'undefined')
    var giant = window.giant = {};
if (typeof giant.ui === 'undefined')
    giant.ui = {};   
(function($) {
   /**
    * 创建一个imageshow图片轮换实例
    * @class giant.ui.imageshow 图片轮换组件
    * @param {object} 若参数为空，则使用giant.ui.imageshow.defaults里的默认参数
    * @example
    * <pre>
    * //以下代码放入body里面，为图片轮换的DOM结构
    * &lt;div class=&quot;ui-imageshow&quot; id=&quot;imageshow&quot;&gt;
    *       &lt;div class=&quot;ui-imageshow-ctn&quot;&gt;
    *           &lt;a href=&quot;###&quot;&gt;&lt;img src=&quot;../../images/commons/1.jpg&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;a href=&quot;###&quot;&gt;&lt;img src=&quot;../../images/commons/2.jpg&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;a href=&quot;###&quot;&gt;&lt;img src=&quot;../../images/commons/3.jpg&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;a href=&quot;###&quot;&gt;&lt;img src=&quot;../../images/commons/4.jpg&quot; alt=&quot;&quot;&gt;&lt;/a&gt;
    *       &lt;/div&gt;
    *       &lt;div class=&quot;ui-imageshow-title&quot;&gt;
    *           &lt;ul&gt;
    *               &lt;li&gt;这里是图片相关标题这里是图片相关标题11&lt;/li&gt;
    *               &lt;li&gt;这里是图片相关标题这里是图片相关标题22&lt;/li&gt;
    *               &lt;li&gt;这里是图片相关标题这里是图片相关标题33&lt;/li&gt;
    *               &lt;li&gt;这里是图片相关标题这里是图片相关标题44&lt;/li&gt;
    *           &lt;/ul&gt;
    *       &lt;/div&gt;
    *       &lt;div class=&quot;ui-imageshow-number&quot;&gt;
    *           &lt;a href=&quot;#&quot;&gt;1&lt;/a&gt;
    *           &lt;a href=&quot;#&quot;&gt;2&lt;/a&gt;
    *           &lt;a href=&quot;#&quot;&gt;3&lt;/a&gt;
    *           &lt;a href=&quot;#&quot;&gt;4&lt;/a&gt;
    *       &lt;/div&gt;
    *   &lt;/div&gt;
    * //以下是调用的js代码。注意：使用window.onload函数，而不要使用$(document).ready函数
    *  $(window).load(function(){
    *          var imageshow = new giant.ui.imageshow({});
    *   })
    * </pre>
    * 
    */ 
    giant.ui.imageshow = function(options) {
        this.opts = $.extend({}, giant.ui.imageshow.defaults, options);
        this.$imageshow = $("#" + this.opts.id);
        this.imageNumeber = this.$imageshow.find(".ui-imageshow-ctn img").size();
        this.unitWidth = this.$imageshow.find(".ui-imageshow-ctn img").outerWidth();
        this.autoPlayTime = null;
        this.unitHeight = this.$imageshow.find(".ui-imageshow-title ul li").outerHeight();
        this.current = 0;
        this._init();

    };
    giant.ui.imageshow.prototype = {
        _init:function() {
            this.$imageshow.find(".ui-imageshow-number a").eq(this.current).addClass("active");
            this._eventBind();
            this.$imageshow.find(".ui-imageshow-title").fadeTo("fast", 0.66);
            if (this.opts.isAuto)this._autoPlay();
        },
        _getNext:function() {
            this.current++;
            if (this.current > this.imageNumeber - 1) {
                this.current = 0;
            }
        },
        _eventBind:function() {
            var $this = this;
            this.$imageshow.find(".ui-imageshow-number a").each(function(index) {
                $(this).bind("click", function() {
                    $this.current = index;
                    $this._show();
                     if ($this.opts.isAuto)$this._autoPlay();
                });
            });
        },
        _autoPlay:function() {
            var $this = this;
            if (this.autoPlayTime != null) {
                clearInterval(this.autoPlayTime);
                this.autoPlayTime = null;
            }
            this.autoPlayTime = setInterval(function() {
                $this._getNext();
                $this._show();
            }, $this.opts.speed);
        },
        _show:function() {
             this.$imageshow.find(".ui-imageshow-title ul").css("top",this.current * this.unitHeight * (-1));
            this.$imageshow.find(".ui-imageshow-ctn").animate({"left":this.current * this.unitWidth * -1}, 1000);
            this.$imageshow.find(".ui-imageshow-number a").removeClass("active").eq(this.current).addClass("active");
        }
    };
    /**
     * @default
     * <pre> 
     * defaults.id: DOM结构组件的ID
     * defaults.isAuto: 是否自动播放
     * defaults.speed 自动播放速度。单位为毫秒。
     * </pre>
     */
    giant.ui.imageshow.defaults = {
        id:"imageshow",
        isAuto:true,
        speed:3000
    };
})(jQuery);